<template>
	<div class="content">
		<el-scrollbar class="content-scrollbar">
			<div class="content-header">
				<router-link to="/paySlipManagement">
					<el-button type="default" icon="el-icon-back" plain>返回</el-button>
				</router-link>
			</div>
			<div class="content-header">
				<span>{{ salaryTitle }}</span>
				<div class="fr">
					<el-dropdown size="medium" trigger="click" placement="bottom">
						<div @click="handleGetModifyHistory">
							<i class="el-icon-date"></i>
							<span style="margin: 0 6px; color: #79abd2; cursor: pointer;">修改历史</span>
						</div>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item v-if="payrollModifyHistoryData.length === 0">
								<div class="modify-history-content" style="width: 400px;">暂无历史记录</div>
							</el-dropdown-item>
							<el-dropdown-item v-for="item in payrollModifyHistoryData" :key="item.spmhId">
								<div class="modify-history-content" style="width: 400px;">
									<p>
										<i class="el-icon-stopwatch"></i>
										[{{ item.modifiedBy }}]于[{{ item.modifiedTime }}]修改了数据
									</p>
									<template v-for="_item in item.list">
										<p :key="_item.spmhId">
											将[{{ _item.staffName }}]的[{{ _item.modifiedItem }}]从[{{
											_item.originalValue
											}}]修改为[{{ _item.modifiedValue }}]
										</p>
									</template>
								</div>
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</div>
			<div class="content-header">
				<el-input v-model="input" placeholder="请输入姓名"></el-input>
				<el-button type="primary" icon="el-icon-search" plain>搜索</el-button>
				<span style="margin: 0 20px;">隐藏空数据：{{ '已开启' }}</span>
				<span>隐藏0数据：{{ '已开启' }}</span>
				<div class="fr">
					<el-button type="primary" icon="el-icon-download" plain @click="handleExport">导出</el-button>
					<el-button
						type="primary"
						icon="el-icon-refresh-left"
						plain
						:disabled="tableData.every(({ sendStatus }) => +sendStatus === 1 || +sendStatus === 2)"
						@click="handleWithdrawAll"
					>全部撤回</el-button>
					<el-button
						type="primary"
						icon="el-icon-refresh-left"
						plain
						:disabled="tableData.every(({ sendStatus }) => +sendStatus !== 1)"
						@click="handleSendAll"
					>全部发送</el-button>
				</div>
			</div>
			<div class="table">
				<el-table :data="tableData" border style="width: 100%;">
					<el-table-column prop="name" label="姓名"></el-table-column>
					<el-table-column prop="enterpriseWechatAccount" label="企业微信帐号/手机号码" width="180">
						<template slot-scope="scope">
							{{
							scope.row.enterpriseWechatAccount
							? scope.row.enterpriseWechatAccount
							: scope.row.phone
							}}
						</template>
					</el-table-column>
					<!-- <el-table-column prop="enterpriseWechatAccount" label="企业微信帐号"></el-table-column>
					<el-table-column prop="phone" label="手机号"></el-table-column>-->
					<el-table-column prop="actualAmount" label="实发金额"></el-table-column>
					<el-table-column prop="lookOverStatus" label="查看情况">
						<template slot-scope="scope">{{ scope.row.lookOverStatus | lookOverStatusChange }}</template>
					</el-table-column>
					<el-table-column prop="lookOverTime" label="查看时间">
						<template slot-scope="scope">{{ scope.row.lookOverTime || '-' }}</template>
					</el-table-column>
					<el-table-column prop="sendStatus" label="发送情况">
						<template slot-scope="scope">{{ scope.row.sendStatus | sendStatusChange }}</template>
					</el-table-column>
					<el-table-column prop="cityconfirmStatus" label="确认情况">
						<template slot-scope="scope">{{ scope.row.confirmStatus | confirmStatusChange }}</template>
					</el-table-column>
					<el-table-column prop="destroyStatus" label="焚毁情况">
						<template slot-scope="scope">{{ scope.row.destroyStatus | destroyStatusChange }}</template>
					</el-table-column>
					<el-table-column prop="destroyTime" label="焚毁时间">
						<template slot-scope="scope">{{ scope.row.destroyTime || '-' }}</template>
					</el-table-column>
					<el-table-column prop="noticeManner" label="发送方式"></el-table-column>
					<el-table-column prop="remark" label="备注"></el-table-column>
					<el-table-column fixed="right" label="操作">
						<template slot-scope="scope">
							<el-button @click="handleViewClick(scope.row)" type="text">详情</el-button>
							<el-button
								@click="handleWithdrawClick(scope.row)"
								:disabled="+scope.row.sendStatus === 1 || +scope.row.sendStatus === 2"
								type="text"
							>撤回</el-button>
							<el-dropdown size="large" @command="handleCommand">
								<el-button type="text" icon="el-icon-more" style="transform: rotate(90deg);"></el-button>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command="edit">
										<el-tooltip content="撤回可进行修改" placement="top" effect="light">
											<el-button
												type="text"
												:disabled="+scope.row.sendStatus === 1"
												@click.stop="handleEdit(scope.row)"
											>修改</el-button>
										</el-tooltip>
									</el-dropdown-item>
									<el-dropdown-item command="send">
										<el-button
											type="text"
											:disabled="+scope.row.sendStatus !== 0"
											@click.stop="handleSend(scope.row)"
										>发送</el-button>
									</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="pagination">
				<el-pagination
					small
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="page.currentPage"
					:page-sizes="[10, 20, 30, 40]"
					:page-size="page.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="page.total"
				></el-pagination>
			</div>
		</el-scrollbar>

		<el-dialog :title="isUpdate ? '工资修改' : '工资详情'" :visible.sync="dialogVisible" width="400px" center>
			<el-card>
				<div slot="header">
					<span>姓名：{{ userPayrollDetails.name }}</span>
					|
					<span
						v-if="userPayrollDetails.importType == 1"
					>企业微信帐号：{{ userPayrollDetails.userAccount }}</span>
					<span v-else-if="userPayrollDetails.importType == 0">手机号：{{ userPayrollDetails.userAccount }}</span>
				</div>
				<ul>
					<li
						v-for="item in userPayrollDetails.list"
						:key="item.spdId"
						class="flex-between line-height-30"
					>
						<span>{{ item.title }}</span>
						<span v-if="!isUpdate">{{ item.value }}</span>
						<el-input v-else v-model="item.value" style="width: 150px;"></el-input>
					</li>
				</ul>
			</el-card>
			<span slot="footer" class="dialog-footer">
				<el-button v-if="!isUpdate" @click="dialogVisible = false">关 闭</el-button>
				<el-button v-else type="primary" @click="handleUpdateClick">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { getStore } from '@/methods/utils'

import qs from 'qs'

import {
	postPayrollDetailsList,
	postPayrollDetailsSend,
	postPayrollDetailsWithdraw,
	postPayrollDetailsGetData,
	postPayrollDetailsUpData,
	postPayrollDetailsSendAll,
	postPayrollDetailsWithdrawAll,
	postPayrollModifyHistory
} from '@/APIs/index/index'

export default {
	name: 'PreviewPaySlip',
	data() {
		const id = this.$route.params?.id
		return {
			id,
			page: {
				currentPage: 1,
				pageSize: 10,
				total: 0
			},
			salaryTitle: '',
			input: '',
			payrollDetailsList: [],
			dialogVisible: false,
			isUpdate: false,
			userPayrollDetails: { list: [] },
			payrollModifyHistoryData: []
		}
	},
	computed: {
		tableData() {
			return this.payrollDetailsList.filter(
				({ name }) => this.input === '' || (name + '').indexOf(this.input) > -1
			)
		}
	},
	filters: {
		lookOverStatusChange(val) {
			return ['未查看', '已查看'][val]
		},
		sendStatusChange(val) {
			return ['未发送', '已发送', '已撤回'][val]
		},
		confirmStatusChange(val) {
			return ['未确认', '已手动确认', '已自动确认', '已焚毁确认'][val]
		},
		destroyStatusChange(val) {
			return ['未焚毁', '已焚毁'][val]
		}
	},
	activated() {
		const list = getStore('PAYROLL_LIST') ? JSON.parse(getStore('PAYROLL_LIST')) : []
		const { salaryTitle = '' } = list.find(({ spmId }) => spmId === this.id) || {}
		this.salaryTitle = salaryTitle
		this.postPayrollDetailsListData()
	},
	methods: {
		async postPayrollDetailsListData() {
			const id = this.id
			const { currentPage: pageNum, pageSize } = this.page
			const {
				data: { list, total }
			} = await postPayrollDetailsList({ id, pageNum, pageSize })
			this.payrollDetailsList = list
			this.page.total = total
		},
		async postPayrollDetailsGetData(row) {
			const { spmId, spdId, name, enterpriseWechatAccount, phone } = row
			const importType = phone ? 0 : 1
			const userAccount = enterpriseWechatAccount ? enterpriseWechatAccount : phone
			const { data } = await postPayrollDetailsGetData({ spmId, userAccount, importType })
			this.$nextTick(() => {
				this.userPayrollDetails = {
					name,
					spdId,
					spmId,
					importType,
					userAccount,
					actualSalary: (data.find(({ title }) => ['实发工资'].includes(title)) || {})?.['value'],
					payrollParseVos: data,
					list: data.filter(
						({ title }) => !['姓名', '手机号码', '企业微信账号', '实发工资'].includes(title)
					)
				}
				this.dialogVisible = true
			})
		},
		async handleViewClick(row) {
			this.isUpdate = false
			// this.dialogVisible = true
			this.postPayrollDetailsGetData(row)
		},
		async handleEdit(row) {
			this.isUpdate = true
			this.postPayrollDetailsGetData(row)
		},
		async handleUpdateClick() {
			const { spmId, userAccount, importType, payrollParseVos } = this.userPayrollDetails
			await postPayrollDetailsUpData({ spmId, userAccount, importType, payrollParseVos })
			this.dialogVisible = false
			this.postPayrollDetailsListData()
		},
		async handleWithdrawClick(row) {
			const { spdId, spmId } = row
			const { code, msg: message } = await postPayrollDetailsWithdraw({ spdId, spmId })
			this.$message({ type: code === 0 ? 'success' : 'error', message })
			this.postPayrollDetailsListData()
		},
		handleSizeChange(val) {
			this.page.pageSize = val
		},
		handleCurrentChange(val) {
			this.page.currentPage = val
		},
		handleCommand(command) {
			if (command === 'edit') {
				console.log(command)
			} else if (command === 'send') {
				console.log(command)
			}
		},
		async handleSend(row) {
			const { spdId, spmId } = row
			const { code, msg: message } = await postPayrollDetailsSend({ spdId, spmId })
			this.$message({ type: code === 0 ? 'success' : 'error', message })
			this.postPayrollDetailsListData()
		},
		handleExport() {
			this.$confirm('导出文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				const [spmId, ids] = [
					this.$route.params?.id,
					this.tableData.map(({ spdId }) => spdId).join(',')
				]
				window.open(`${this.$BASE_URL}/payrollDetails/export?${qs.stringify({ spmId, ids })}`)
				// window.open(`${this.$BASE_URL}/payrollDetails/export?spmId=${spmId}}&ids=${ids}`)
			})
		},
		handleSendAll() {
			this.$confirm('全部发送, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				const spmId = this.$route.params?.id
				await postPayrollDetailsSendAll({ spmId })
				this.postPayrollDetailsListData()
			})
		},
		handleWithdrawAll() {
			this.$confirm('全部撤回, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				const spmId = this.$route.params?.id
				await postPayrollDetailsWithdrawAll({ spmId })
				this.postPayrollDetailsListData()
			})
		},
		async handleGetModifyHistory() {
			this.payrollModifyHistoryData = []
			const spmId = this.$route.params?.id
			const { data } = await postPayrollModifyHistory({ spmId })
			this.$nextTick(() => (this.payrollModifyHistoryData = data))
		}
	}
}
</script>

<style lang="scss" scoped>
/deep/ .modify-history-content {
	p:not(:first-child) {
		padding-left: 20px;
		line-height: 30px;
		&::before {
			content: '·';
			font-size: 30px;
			vertical-align: bottom;
		}
	}
}
</style>
